<template >
  <div class="box">
    <div ref="Histogram"  :style="{width:width,height:height}"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    GradualColor: {
      type: Object,
      default: {
        startColor: "#00d2e6",
        endcolor: "#007dff"
      }
    },
    GradualFlag: {
      type: Boolean,
      default: false
    },
    XColor: {
      type: String,
      default: "#fff"
    },
    YColor: {
      type: String,
      default: "#fff"
    },
    XData: {
      type: Array,
      default: [1,2,3,4,5,6,7,8,9,10]
    },
    YData: {
      type: Array,
      default: [10,20,30,45,55,15,65,54,8,15]
    },
    width:{
      type:String,
      default:'644px'
    },
    height:{
       type:String,
      default:'376px'
    }
  },
  data() {
    return {};
  },
  methods: {
    init() {
      var myChart = echarts.init(this.$refs.Histogram);
      if (this.GradualFlag) {
        var GradualColor = new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0,
          [
            {
              offset: 0,
              color: this.GradualColor.startColor
            },
            {
              offset: 1,
              color: this.GradualColor.endcolor
            }
          ],
          false
        );
      }
      var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "2%",
          right: "4%",
          bottom: "3%",
          top:"3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: this.XData,
            axisTick: {
              alignWithLabel: true
            },
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: this.XColor
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: this.YColor
              }
            }
          }
        ],
        series: [
          {
            name: "元",
            type: "bar",
            barWidth: "60%",
            data: this.YData,
            itemStyle: {
              normal: {
                color: GradualColor,
                barBorderRadius: [10, 10, 0, 0]
              }
            }
          }
        ]
      };

      myChart.setOption(option);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style scoped>
.Histogram,
.box {
  width: 100%;
}
#ss {
  width: 644px;
  height: 376px;
}
</style>